<template>
	<view>
		<view class="footerList">
			<uni-easyinput @input="filteredList" v-model="searchText" placeholder="请输入筛选值"></uni-easyinput>
			<dl v-for="(item,index) in datalists" :key="item.index">
				<dt>{{item.index}}</dt>
				<view class="dcl">
					<dd>{{item.title}}</dd>
					<dd><span>{{item.from}}</span><span>{{item.date}}</span></dd>
				</view>
				<dd><img :src="item.imgSrc" alt=""></dd>
			</dl>
		</view>
	</view>
</template>

<script>
	const getlist = require('../../data/travelInfo.json')
	export default {
		data() {
			return {
				datalist: [],
				searchText: '',
				datalists: []
			}
		},
		methods: {
			redirectToDetail(index) {
				// 跳转到详情页，并传递商品id
				uni.navigateTo({
					url: '/pages/Detail/Detail?id=' + index
				});
			},
			filteredList() {
				let newarr = this.datalist.filter(item => {
					return item.title.includes(this.searchText)
				})
				this.datalists = newarr
			}
		},
		mounted() {
			//获取数据
			this.datalist = getlist;
			this.filteredList()
		},
	}
</script>

<style lang="scss">
	.footerList {
		width: 100%;

		dl {
			position: relative;
			height: 200rpx;
			width: 100%;
			border-bottom: 2rpx solid #ccc;

			dt {
				float: left;
				width: 80rpx;
				height: 180rpx;
				line-height: 70rpx;
				color: red;
				text-align: center;
			}

			.dcl {
				dd:nth-child(1) {
					width: 440rpx;
					font-size: 35rpx;
					padding-top: 10rpx;
				}

				dd:nth-child(2) {
					width: 500rpx;
					padding-top: 20rpx;
					font-size: 24rpx;
					color: #a4a4a4;
					float: left;

					span:nth-child(2) {
						margin-left: 20rpx;
					}
				}
			}


			dd:nth-child(3) {
				position: absolute;
				top: 24rpx;
				right: 60rpx;
				float: left;

				img {
					width: 200rpx;
					height: 120rpx;
				}
			}
		}
	}
</style>